import React from 'react';
import search from '../../assets/css/common/search.module.css'
import {Modal} from 'antd-mobile';
import 'antd-mobile/lib/modal/style/css'


export default class SearchComponent extends React.Component{
    constructor(){
        super();
        this.state={
            txtList:[],
            txtOneList:[],
            list:[]
        }
    }
    goBack(){
        this.props.history.goBack()
    }
    mount(){
        if (localStorage.search) {
            let goods = JSON.parse(localStorage.search);
            this.setState({txtOneList: goods})
        }
    }
    componentWillMount() {
        this.getData();
        this.mount();
    }
    getData(){
        fetch("http://vueshop.glbuys.com/api/home/public/hotwords?token=1ec949a15fb709370f")
            .then((res)=>{
                return res.json()
            }).then(res=>{
                if (res.code===200){
                    this.setState({txtList:res.data});
                }
        })
    }
    jump(item,path){
        this.props.history.replace(path);
        let txtOneList = this.state.txtOneList;
        if (txtOneList.length !== 0){
            for (let i=0;i<txtOneList.length;i++) {
                if (txtOneList[i] === item){
                    txtOneList.splice(i,1);
                    break;
                }
            }
            txtOneList.unshift(item);
        } else {
            txtOneList.unshift(item);
        }
        localStorage['search'] = JSON.stringify(txtOneList);
        let goods = JSON.parse(localStorage.search);
        this.setState({txtOneList:goods})
    }
    del(){
        const alert = Modal.alert;
        alert('', '确认要删除吗', [
            { text: '取消', onPress: () => console.log('cancel') },
            { text: '确认', onPress: () => {
                    localStorage.removeItem('search');
                    if (localStorage.search){
                        let goods=JSON.parse(localStorage.search);
                        this.setState({txtOneList:goods});
                    }else {
                        this.setState({txtOneList:[]});
                    }
                }}
        ])
    }
    boxSpan(path){
        let val=document.getElementById('input').value;
        if (localStorage.search) {
            if(val!==""){
                let goods=JSON.parse(localStorage.search);
                goods.unshift(val);
                localStorage['search']=JSON.stringify(goods);
                this.props.history.replace(path);
            }
        }else {
            let list=this.state.list;
            list.unshift(val);
            localStorage['search']=JSON.stringify(list);
        }
        document.getElementById('input').value="";
        this.mount();
    }

    render() {
        return(
            <div className={search.boxSearch}>
                <nav>
                    <img src={require('../../assets/images/common/search_x.png')} alt='' onClick={this.goBack.bind(this)}/>
                    <div>
                        <input type='text' placeholder='请输入宝贝名称' id="input"/>
                        <span onClick={this.boxSpan.bind(this,'/common/word?keyword=连衣裙')} className={search.boxSpan}><img src={require('../../assets/images/common/search_icon.png')} alt=''/></span>
                    </div>
                </nav>
                <div className={search.img}>
                    <h3>最近搜索</h3>
                    <img src={require('../../assets/images/common/bin.png')} onClick={this.del.bind(this)} alt=''/>
                </div>
                <div className={search.boxDiv}>
                    {
                        this.state.txtOneList.map((item,index)=>{
                            return(
                                <div key={index} onClick={this.jump.bind(this,item,'/common/word?keyword='+item)}>
                                    {item}
                                </div>
                            )
                        })
                    }
                </div>
                <h3>热门搜索</h3>
                <div className={search.boxDiv}>
                    {this.state.txtList.map((item,index)=>{
                        return(
                            <div key={index} onClick={this.jump.bind(this,item.title,'/common/word?keyword='+item.title)}>
                                {item.title}
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}